<template>
	<view class="canvasView">
		<view class="echarts">
			<mpvue-echarts :onInit="lineInit" canvasId="line" ref="lineChart" />
		</view>
	</view>
</template>

<script>
import * as echarts from '../../components/echarts/echarts.simple.min.js';
import mpvueEcharts from '../../components/mpvue-echarts/src/echarts.vue';
let data = [];
	let ti1 = +new Date() -24 * 30 * 60 * 60 * 1000
	function randomData(i) {
		let now = new Date(new Date()- 24 * i * 60 * 60 * 1000)
		return {
			name: [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
			value: [
				[now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
				(0.1 - (ti1 - now)/20000000000).toFixed(4)
			]
		}
	}

	for (var i = 1; i < 8; i++) {
		data.push(randomData(i));
	}
let lineOption = {
	 title: {
        text: 'MGC走势图'
    },
	textStyle: {
		color: '#fff',
		fontStyle: 'normal',
		fontSize: 6
	},
	color: ['#1dd445'],
	grid: [
		{
			top: '30',
			left: '50'
		}
	],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
        splitLine: {
            show: false
        },
		maxInterval: 3600 * 24 * 1000,
		axisLabel:{
			margin: 10,
            textStyle:{
                fontSize: 8
            }
        }
    },
    yAxis: {
		axisLine: {
			show: false
		},
		axisTick: {
			show: false
		},
		min: 0,
		max: 2,
		interval: 0.2, //间隔
		// minInterval: 0.2,
		splitLine: {
			show: true,
			lineStyle:{
                 color: ['#fff'],
                 width: 1,
                type: 'solid'
            }

		},
		axisLabel:{
		    textStyle:{
		        fontSize: 8
		    }
		},
		lineStyle: {
			color: '#1dd445'
		}
    },
    series: [{
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
    }]
};

export default {
	data() {
		return {
			updateStatus: false
		}
	},
	onLoad() {
	},
	computed: {
	},
	methods: {
		lineInit(canvas, width, height) {
			echarts.setCanvasCreator(() => canvas);
				let lineChart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				canvas.setChart(lineChart)

				lineChart.setOption(lineOption)
				return lineChart
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			let h = date.getHours();
			let minute = date.getMinutes();

			if (type === 'start') {
				year = year - 10;
			} else if (type === 'end') {
				// year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			h = h > 9 ? h : '0' + h;
			minute = minute > 9 ? minute : '0' + minute;
			return `${year}-${month}-${day}`;
		}
	},
	components: {
		mpvueEcharts
	}
};
</script>

<style scoped lang="scss">
.canvasView {
	width: 100%;
	height: 500upx;
	background-color: #3E527E;
	.echarts {
		position: relative;
		height: 100%;
		&-title {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			text-align: center;
			font-size: 22upx;
			color: #222222;
		}
	}
}
</style>
